<template>  
  <div>  
     <h1>这里是滨海校区</h1> 
    <h1>学生查找功能</h1>  
    <form @submit.prevent="searchStudent">  
      <div>  
        <label for="studentId">学号:</label>  
        <input type="text" id="studentId" v-model="studentId" required>  
      </div>  
      <button type="submit">查找</button>  
    </form>  
    <div v-if="studentInfo">  
      <h2>学生信息</h2>  
      <p>姓名: {{ studentInfo.name }}</p>  
      <p>学号: {{ studentInfo.studentId }}</p> 
      <p>专业: {{ studentInfo.studentSubject }}</p> 
    </div>  
    <div v-else-if="searching">  
      <p>正在查找...</p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'CampusBinhai',  
  data() {  
    return {  
      studentId: '',  
      studentInfo: null,  
      searching: false,  
    };  
  },  
  methods: {  
    searchStudent() {  
      this.searching = true;  
     
      setTimeout(() => {  
        
        if (this.studentId === '123456') {  
          this.studentInfo = {  
            name: '张三',  
            studentId: '123456',  
            studentSubject:"计算机",
          };  
        } else {  
          this.studentInfo = null;  
          alert('没有找到该学号的学生！');  
        }  
        this.searching = false;  
      }, 1000); 
    },  
  },  
};  
</script>  
  
<style scoped>  

</style>